import React from "react";
import { Tabs, WhiteSpace, Badge, NavBar, Icon } from "antd-mobile";
import Recommend from "./container/Recommend";
import Singer from "../lh/Singer";
import List from "../wl/List";
import Radio from "./container/radio";
import { withRouter, Route } from "react-router-dom";
import "../../assets/wwj/main.css";
const tabs = [
  {
    title: <Badge>推荐</Badge>
  },
  { title: <Badge>歌手</Badge> },
  {
    title: <Badge>排行榜</Badge>
  },
  {
    title: <Badge>电台</Badge>
  }
];
class Tab extends React.Component {
  constructor() {
    super();
    this.state = {
      number: 0
    };
  }
  componentDidMount() {
    if (this.props.history.location.pathname == "/") {
      this.props.history.push("/rem");
    }
    let that = this;
    setInterval(function() {
      if (that.props.history.location.pathname == "/rem") {
        that.setState({
          number: 0
        });
      } else if (that.props.history.location.pathname == "/singer") {
        that.setState({
          number: 1
        });
      } else if (that.props.history.location.pathname == "/list") {
        that.setState({
          number: 2
        });
      } else if (that.props.history.location.pathname == "/radio") {
        that.setState({
          number: 3
        });
      }
    }, 1000);
  }
  componentWillReceiveProps() {}
  jumpSearch() {
    this.props.history.push("/search");
  }
  render() {
    let that = this;
    return (
      <div>
        <div>
          {/* header */}
          <NavBar
            className="mainnavbar"
            mode="light"
            icon={<Icon type="ellipsis" />}
            rightContent={[
              <Icon
                onClick={this.jumpSearch.bind(this)}
                key="0"
                type="search"
                className="mainicon"
              />
            ]}
          >
            <span className="mainspan">网易云音乐</span>
          </NavBar>
        </div>
        <div>
          <Tabs
            tabBarActiveTextColor={"red"}
            animated
            swipeable={false}
            tabs={tabs}
            initialPage={0}
            page={this.state.number}
            onTabClick={(tab, index) => {
              if (index == 0) {
                this.props.history.push("/rem");
              } else if (index == 1) {
                this.props.history.push("/singer");
              } else if (index == 2) {
                this.props.history.push("/list");
              } else if (index == 3) {
                this.props.history.push("/radio");
              }
            }}
          >
            <div className="maintab">
              <Route path="/rem" component={Recommend} />
            </div>
            <div className="maintab">
              <Route path="/singer" component={Singer} />
            </div>
            <div className="maintab">
              <Route path="/list" component={List} />
            </div>
            <div className="maintab">
              <Route path="/radio" component={Radio} />
            </div>
          </Tabs>
          <WhiteSpace />
        </div>
      </div>
    );
  }
}
export default withRouter(Tab);
